<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>付款</title>
</head>
<body>
<div>
    <form action="/pay">
        <h3>付款剩余时间<span id="countDown" style="color: red"></span>s</h3>
        <div>订单编号：<span th:text="${order.id}"></span></div>
        <input name="id" th:value="${order.id}" hidden>
        <button type="submit">马上付款</button>
    </form>
</div>
</body>
<script th:inline="javascript">
    var createTime = [[${order.createTime}]];
    // 假设订单只有 10s 支付时间
    remainTime = 10 - Math.round((new Date().getTime() - createTime) / 1000);
    console.log(createTime);
    if (remainTime <= 0) {
        window.location = "/";
    }
    document.getElementById("countDown").innerText = remainTime;
    setInterval(function () {
        remainTime--;
        if (!remainTime) {
            window.location = "/failed";
        } else {
            document.getElementById("countDown").innerText = remainTime;
        }
    }, 1000)
</script>
</html>